<template>
	<view>
		<view
			style="height: 88rpx;line-height: 88rpx;text-align: left;margin-left: 24rpx;color: white;font-size: 18px;margin-top:40px;"
			class="tn-icon-left" @click="goBack"></view>
		<view style="height: 60px;line-height: 60px;font-size: 40px;font-weight: bold;text-align: center;color: white;">
			邀请好友得会员</view>
		<view
			style="width: 90%;float: left;margin-left: 5%;border-radius: 10px;background-color: #E7792E;margin-top: 40rpx;padding: 30rpx;color: white;">
			<view style="font-weight: bold;">活动规则：</view>
			<view>
				现在平台还没有会员机制的啦，保不齐我什么时候觉得自己翅膀硬了，就加上会员模块！所以抢先把自己变成会员，后续就能免费使用啦！
				
			</view>
		</view>
		<view style="width: 100%;float: left;margin-top: 60rpx;">
			<view class="nav-list-popup" @click="showImg">
				<text class="tn-icon-wechat" style="font-size: 16px;"></text>
				<text>发朋友圈得会员</text>
			</view>
			<view class="nav-list-popup" style="background-color: #2EBC8C;" @click="share">
				<text class="tn-icon-moments" style="font-size: 16px;"></text>
				<text>邀请朋友得会员</text>
			</view>
		</view>
		<view
			style="width: 90%;float: left;margin-left: 5%;border-radius: 10px;background-color: white;min-height: 550rpx;margin-top: 60rpx;padding: 30rpx;">
			<view style="text-align: center;font-weight: bold;">邀请记录</view>
			<view class="empty__item" style="margin-top: 50px;">
				<tn-empty icon="/static/images/empty.png" text="赶紧去邀请好友吧"></tn-empty>
			</view>
		</view>
		<tn-popup v-model="showPopup" height="85%" mode="bottom" :borderRadius="20" :closeBtn="true">
			<view style="float: left;width: 100%;padding-top:50px;" >
				<tn-swiper :list="list" :current="0" :effect3d="true"  :autoplay="false"
					:height="1000" @change="changeImg"></tn-swiper>
				<view class="nav-list-popup-show" @click="btnSharePy">
					<text class="tn-icon-wechat" style="font-size: 16px;"></text>
					<text>发朋友圈得会员</text>
				</view>
			</view>
		</tn-popup>
	</view>
</template>
<script>
	var _self;
	export default {
		data() {
			return {
				showPopup: false,
				user: [],
				list: [{
						id:0,
						image: '/static/bg/3.jpg',
						title: 'xxx'
					},
					{
						id:1,
						image: '/static/bg/1.jpg',
						title: 'xxx'
					},
					{
						id:2,
						image: '/static/bg/2.jpg',
						title: 'xxx'
					},

				],
				imageUrl:'/static/bg/3.jpg',
			};
		},
		onLoad(options) {
			_self = this


		},
		methods: {
			showImg() {
				this.showPopup = true
			},
			changeImg(e){
				console.log(e)
				for(var i=0;i<this.list.length;i++){
					if(e == this.list[i].id){
						this.imageUrl = this.list[i].image
						break
					}
				}
			},
			share() {
				// #ifdef APP
				uni.share({
					provider: 'weixin', //分享服务提供商（即weixin|qq|sinaweibo）
					type: 0, //图文
					scene: 'WXSceneSession', //provider 为 weixin 时必选 WXSceneSession分享到聊天界面，WXSceneTimeline分享到朋友圈，WXSceneFavorite分享到微信收藏
					title: '甲方爸爸您来啦!', //分享内容的标题
					summary: '拾光记App，赶紧跟我一起来体验！', //分享内容的摘要
					href: 'http://uniapp.dcloud.io/', //跳转链接，type 为 0 时必选
					imageUrl: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png', //图片地址，type 为 0、2、5 时必选
					success(res) {
						//成功返回的参数
						console.log(res);
					},
					fail(err) {
						//失败返回的参数
						console.log(err);
					}
				})
				// #endif
			},
			btnSharePy() {
				var strProvider = "weixin"
				var strScene = "WXSenceTimeline"
				var mytype = 2
				uni.share({
					provider: strProvider,
					scene: strScene,
					type: mytype,
					title: '甲方爸爸您来啦!', //分享内容的标题
					summary: '拾光记App，赶紧跟我一起来体验！', //分享内容的摘要
					href: 'http://uniapp.dcloud.io/', //跳转链接，type 为 0 时必选
					imageUrl: _self.imageUrl, //图片地址，type 为 0、2、5 时必选
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function(err) {
						console.log("fail:" + JSON.stringify(err));
					}
				})

			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},

		}
	};
</script>


<style>
	page {
		height: 100%;
		width: 100%;
		margin: 0;
		padding: 0px;
		background-color: #FF9951;

	}

	.nav-list-popup {
		float: left;
		bottom: 15px;
		width: 44%;
		margin-left: 4%;
		text-align: center;
		background-color: #438BD7;
		border-radius: 30px;
		justify-content: space-between;
		color: white;
		height: 44px;
		line-height: 44px;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
	}

	.nav-list-popup-show {
		position: fixed;
		bottom: 30px;
		width: 80%;
		margin-left: 10%;
		text-align: center;
		background-color: #438BD7;
		border-radius: 10px;
		justify-content: space-between;
		color: white;
		height: 44px;
		line-height: 44px;
		box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.07);
	}
</style>